<template>
  <view class="cascader-wrap">
    <cascader :insert="insert" :hideBorder="hideBorder" :hidePath="hidePath" @tag-click="clickTag"
      :areaList="oldAreaList" :currentNo="current_no" @line-click="clickLine" @show-more="showMore"
      :showSelect="showSelect" :column="srvInfo.column||srvInfo.refed_col"
      :showCol="srvInfo.showCol||srvInfo.key_disp_col" :isShowMore="isShowMore" :lineDataDefault="lineDataDefault">
    </cascader>
    <view class="button-box" v-if="!hideButton">
      <button class="cu-btn bg-green" @click="resetData">重 置</button>
      <button class="cu-btn bg-blue"
        @click="emitSelectVal">{{ lineDataDefault[lineDataDefault.length - 1] ? '确 定' : '取 消' }}</button>
    </view>
  </view>
</template>

<script>
  import cascader from './cascader.vue';
  export default {
    name: 'cascaderSelector', //层叠选择器外层，处理数据
    components: {
      cascader
    },
    data() {
      return {
        areaList: [],
        total: 0,
        confirmText: '',
        parent_no: '',
        page: {
          total: 0,
          pageNo: 1,
          rownumber: 50
        },
        showSelect: true,
        isShowMore: false, //是否显示‘更多’按钮
        outputData: {},
        currentClick: null,
        lineDataDefault: [], //线数据默认值
        searchKey: '', // 搜索关键词
        oldAreaList: [],
        current_no: ''
      };
    },
    methods: {
      resetData() {
        this.clickLine();
        this.parent_no = '';
      },
      showMore() {
        // 点击了‘更多’按钮
        // uni.showLoading()
        this.page.pageNo++;
        let condition = [];
        if (this.parent_no) {
          condition = [{
            colName: this.srvInfo?.parentCol || 'parent_no',
            ruleType: 'eq',
            value: this.parent_no
          }];
        } else if (this.srvInfo.isTree === false) {
          condition = [];
        } else {
          condition = [{
            colName: this.srvInfo?.parentCol || 'parent_no',
            ruleType: 'isnull'
          }];
        }
        this.getAreaData(condition, true);
        this.showSelect = true;
      },
      searchWithKey() {
        let condition = [];
        if (this.srvInfo.isTree) {
          condition.push({
            colName: this.srvInfo?.parentCol || 'parent_no',
            ruleType: this.parent_no ? 'eq' : 'isnull',
            value: this.parent_no
          });
        }
        if (this.searchKey) {
          condition.push({
            colName: this.srvInfo.key_disp_col,
            ruleType: 'like',
            value: this.searchKey
          });
        }
        this.getAreaData(condition).then(data => {
          this.oldAreaList = this.deepClone(data);
        });
        this.showSelect = true;
      },
      async getAreaData(cond, ismore, defaultVal, index, lastListIndex) {
        const srvInfo = this.srvInfo;
        const serviceName = srvInfo.serviceName;
        const appName = srvInfo.srv_app || srvInfo.appNo || this.srvApp;
        const that = this;
        let url = this.getServiceUrl(appName, serviceName, 'select');
        let condition = [];
        if (cond && !ismore) {
          condition = cond;
        } else if (cond && ismore) {
          condition = cond;
        } else if (srvInfo.isTree === false) {
          condition = [];
        } else {
          condition = [{
            colName: srvInfo?.parent_col|| this.srvInfo?.parentCol || 'parent_no',
            ruleType: 'isnull'
          }];
        }
        let req = {
          serviceName: serviceName,
          colNames: ['*'],
          condition: condition,
          page: {
            pageNo: this.page.pageNo,
            rownumber: this.page.rownumber
          }
        };
        if (this.order) {
          req.order = this.order
        }
        const res = await this.$http.post(url, req);
        if (res && res.data && res.data.state === 'SUCCESS') {
          if (!defaultVal) {
            const page = res.data.page;
            that.page.pageNo = page.pageNo;
            that.page.total = page.total;
            if (ismore) {
              // 展示更多
              that.areaList = that.areaList.concat(res.data.data);
            } else {
              that.areaList = res.data.data;
            }
            if (page.total > page.pageNo * page.rownumber) {
              that.isShowMore = true;
            } else {
              that.isShowMore = false;
            }
            return that.areaList;
          } else {
            const data = res.data.data;
            that.$set(this.lineDataDefault, index, data[0]);
            if (index === lastListIndex) {
              that.areaList = res.data.data;
            }
            return data;
          }
        }
      },
      clickTag(e) {
        this.currentClick = e;
        this.current_no = e[this.srvInfo?.column || 'no'];
        if (this.srvInfo.isTree === false) {
          this.$emit('getCascaderValue', e, 'sure');
          this.areaList = [];
          this.showSelect = false;
          return;
        }
        if (e[this.srvInfo?.column || 'no']) {
          if (this.parent_no && e[this.srvInfo?.column || 'no'] === this.parent_no) {
            return;
          }
          if (e[this.srvInfo?.parentCol || 'parent_no'] === null) {
            this.lineDataDefault = [];
          } else if (e[this.srvInfo?.parentCol || 'parent_no'] === this.outputData[this.srvInfo?.parentCol ||
              'parent_no']) {
            // 同级
            this.lineDataDefault.splice(this.lineDataDefault.findIndex(item => item[this.srvInfo?.parentCol ||
              'parent_no'] === e[this.srvInfo?.parentCol || 'parent_no']), 1);
          } else if (this.lineDataDefault.findIndex(item => item[this.srvInfo?.parentCol || 'parent_no'] === e[this
              .srvInfo?.parentCol || 'parent_no']) !== -1) {
            this.lineDataDefault.splice(this.lineDataDefault.findIndex(item => item[this.srvInfo?.parentCol ||
              'parent_no'] === e[this.srvInfo?.parentCol || 'parent_no']), this.lineDataDefault.length);
          }
          this.outputData = e;
          this.$emit('clickTag', e);
          this.page.pageNo = 1;
          let condition = [{
            colName: this.srvInfo?.parentCol || 'parent_no',
            ruleType: 'eq',
            value: e[this.srvInfo?.column || 'no']
          }];
          let lineDataDefault = [...this.lineDataDefault, e];
          this.lineDataDefault = lineDataDefault;
          this.parent_no = e[this.srvInfo?.column || 'no'];
          if (e.is_leaf === '是') {
            // this.showSelect = false;
          } else {
            this.showSelect = true;
          }
          this.getAreaData(condition).then(data => {
            let oldAreaList = this.oldAreaList;
            this.valuationChild(oldAreaList, data, e);
          });
        }
      },
      valuationChild(oldAreaList, child, e) {
        if (oldAreaList.length > 0) {
          oldAreaList.forEach(item => {
            if (item[this.srvInfo?.column || 'no'] === e[this.srvInfo?.column || 'no']) {
              this.$set(item, 'child', child);
            }
            if (item.child) {
              this.valuationChild(item.child, child, e);
            }
          });
        }
      },
      clickLine(e, index) {
        console.log('click-line:', e, index);
        this.page.pageNo = 1;
        if (index < this.lineDataDefault.length - 1) {
          this.lineDataDefault = this.lineDataDefault.slice(0, index + 1);
        }
        if (e && e[this.srvInfo?.column || 'no']) {
          if (e[this.srvInfo?.parentCol || 'parent_no'] === null) {
            this.lineDataDefault = this.lineDataDefault.slice(0, 1);
          } else if (e[this.srvInfo?.parentCol || 'parent_no'] === this.outputData[this.srvInfo?.parentCol ||
              'parent_no']) {
            // 同级
            this.lineDataDefault.splice(this.lineDataDefault.findIndex(item => item[this.srvInfo?.parentCol ||
              'parent_no'] === e[this.srvInfo?.parentCol || 'parent_no']) + 1, 1);
          } else if (this.lineDataDefault.findIndex(item => item[this.srvInfo?.parentCol || 'parent_no'] === e[this
              .srvInfo?.parentCol || 'parent_no']) !== -1) {
            // 父级
            this.lineDataDefault.splice(this.lineDataDefault.findIndex(item => item[this.srvInfo?.parentCol ||
              'parent_no'] === e[this.srvInfo?.parentCol || 'parent_no']) + 1, this.lineDataDefault.length);
          }
          this.outputData = e;
          this.$emit('clickLine', e);
          let condition = [{
            colName: this.srvInfo?.parentCol || 'parent_no',
            ruleType: 'eq',
            value: e[this.srvInfo?.column || 'no']
          }];
          this.parent_no = e[this.srvInfo?.column || 'no'];
          this.getAreaData(condition).then(data => {
            let oldAreaList = this.oldAreaList;
            this.valuationChild(oldAreaList, data, e);
          });
          if (e.is_leaf === '是') {
            // this.showSelect = false;
          } else {
            this.showSelect = true;
          }
        } else if (!e) {
          this.lineDataDefault = [];
          this.getAreaData().then(data => {
            this.oldAreaList = this.deepClone(data);
          });
          this.showSelect = true;
        }
      },

      emitSelectVal() {
        if (this.lineDataDefault[this.lineDataDefault.length - 1]) {
          // 确定
          this.$emit('getCascaderValue', this.lineDataDefault[this.lineDataDefault.length - 1], 'sure');
        } else {
          // 取消
          this.$emit('getCascaderValue', false);
        }
      }
    },
    created() {
      if (this.srvInfo && this.srvInfo.serviceName) {
        this.getAreaData().then(data => {
          this.oldAreaList = this.deepClone(data);
        });
      }
    },
    props: {
      order: {
        type: [Array, Object]
      },
      insert: {
        type: Boolean,
        default: false
      },
      hideBorder: {
        type: Boolean,
        default: false
      },
      hidePath: {
        type: Boolean,
        default: false
      },
      hideButton: {
        type: Boolean,
        default: false
      },
      srvApp: {
        type: String
      },
      srvInfo: {
        type: Object,
        default: () => {
          return {
            serviceName: 'srvdaq_check_area_select',
            appNo: 'daq'
          };
        }
      }
    }
  };
</script>

<style lang="scss">
  .cascader-wrap {
    width: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: scroll;

    .button-box {
      width: 100%;
      padding: 20rpx 0 40rpx;
      display: flex;
      justify-content: center;

      .cu-btn {
        width: 45%;
        margin-right: 20rpx;

        &:nth-child(2n) {
          margin-right: 0;
        }
      }
    }
  }
</style>
